<template>
    <div class="header" :class="{'header-collapse':collapse}">
        <div class="collapse-btn" @click="changeCollapse">
            <i class="el-icon-menu" ></i>
        </div>
        <div class="pos">
          <el-button icon="el-icon-menu" size="mini" @click="skipIndex"></el-button>
        </div>
        <div class="user" @click="loginOff">

        </div>
    </div>
</template>

<script>
export default {
  name: "HomeHeader",
  methods: {
    changeCollapse() {
      this.$store.commit("changeCollapse");
    },
    skipIndex(){
      this.$router.push({ path: '/home/index' })
    },
    loginOff(){
      this.$router.push({ path: '/login' })
    }
  },
  computed: {
    collapse() {
      return this.$store.state.collapse;
    }
  }
};
</script>

<style scoped>
.header {
  position: absolute;
  left: 250px;
  right: 0;
  height: 80px;
  line-height: 80px;
  color: #fff;
  display: flex;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  border-bottom: 1px solid #e6e6e6;
  background-color: #20a0ff;
}

.header .el-icon-menu{
  font-size: 16px;
}

.header .tip {
  padding: 3px;
  background-color: red;
  border-radius: 9px;
  font-size: 12px;
  text-align: center;
}
.header-collapse {
  left: 65px;
}
.header .pos{
  position: absolute;
  right: 80px;
}
.header .user {
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top:20px;
  margin-right: 20px;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: url("../../../assets/images/user.gif") center center no-repeat;
  background-size: cover;
  cursor: pointer;
}


.collapse-btn {
  margin: 0 10px;
  cursor: pointer;
}
</style>

